<template>
  <div class="tabs">
    <a-radio-group v-model="activeKey" @change="change">
      <a-radio-button v-for="(item, index) in tabsList" :key="index" :value="index">
        {{ item.title }}
      </a-radio-button>
    </a-radio-group>

    <a-tabs v-model="activeTag" class="tabs_tabs" @change="chooseTag">
      <a-tab-pane v-for="(item, index) in tabsList[activeKey].children" :key="index" :tab="item.title"> </a-tab-pane>
    </a-tabs>
    <div v-show="!show">
      <div
        class="tabs_serach"
        v-if="
          tabsList[activeKey].children[activeTag] &&
            tabsList[activeKey].children[activeTag].searchField &&
            tabsList[activeKey].children[activeTag].searchField.length
        "
      >
        <div
          v-for="(item, index) in tabsList[activeKey].children[activeTag].searchField"
          :key="item.id"
          class="tabs_serach_temp"
        >
          <p-search
            v-if="item.type == 'input'"
            class="tabs_serach_item"
            :index="index"
            :label="item.title"
            @change="inputChange"
            ref="searchRef"
          ></p-search>
          <p-select
            v-else-if="item.type == 'select'"
            :label="item.title"
            :index="index"
            :options="item.options"
            @change="selectChange"
            ref="selectRef"
          ></p-select>
        </div>
      </div>
    </div>
    <div class="tabs_button" v-show="!show">
      <a-button type="primary" icon="export" class="tabs_button_plus" @click="exportList">导出</a-button>
      <a-button icon="search" class="tabs_button_search" @click="search" :loading="searchLoading" type="primary"
        >查询</a-button
      >
      <a-button icon="undo" class="tabs_button_redo" @click="reset">重置</a-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // tabs列表
    tabsList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 显示搜索框和按钮
    show: {
      type: Boolean,
      default: false
    },
    // 默认激活的tabs
    defaultTabs: {
      type: Number,
      default: 0
    },
    // 默认激活的tag
    defaultTag: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeKey: this.defaultTabs, // 激活的tabs
      activeTag: this.defaultTag, // 激活的tag
      searchLoading: false, // 按钮搜索中状态
      codeValue: '' // 验证码输入框值
    }
  },
  components: {
    pTag: () => import('@/components/ent_licSearch/p-tag.vue'),
    pSearch: () => import('@/components/ent_licSearch/p-search.vue'),
    pSelect: () => import('@/components/ent_licSearch/p-select.vue')
  },
  mounted() {},
  methods: {
    // tabs标签chang事件
    change(e) {
      this.activeKey = e.target.value
      this.activeTag = 0
      this.searchReset()
      this.$emit('change', this.activeKey, this.activeTag)
    },
    // 选择标签
    chooseTag(e) {
      this.activeTag = e
      this.searchReset()
      this.$emit('change', this.activeKey, this.activeTag)
    },
    // 搜索框change事件
    inputChange(value, index) {
      if (
        this.tabsList[this.activeKey].children[this.activeTag]?.searchField?.length &&
        this.tabsList[this.activeKey].children[this.activeTag]?.searchField[index]
      ) {
        this.tabsList[this.activeKey].children[this.activeTag].searchField[index].value = value
      }
    },
    // 下拉选择器change事件
    selectChange(value, index) {
      if (
        this.tabsList[this.activeKey].children[this.activeTag]?.searchField?.length &&
        this.tabsList[this.activeKey].children[this.activeTag]?.searchField[index]
      ) {
        this.tabsList[this.activeKey].children[this.activeTag].searchField[index].value = value
      }
    },
    // 导出按钮
    exportList() {
      this.$emit('export', this.activeKey, this.activeTag)
    },
    // 查询按钮
    search() {
      if (!this.tabsList[this.activeKey].children[this.activeTag]?.searchField) {
        this.$message.warning('尚未配置！')
        return
      }
      this.searchLoading = true
      this.$emit('search', this.activeKey, this.activeTag)
      this.searchLoading = false
    },
    // 搜索框重置
    searchReset() {
      if (this.$refs.searchRef?.length) {
        this.$refs.searchRef.forEach(v => {
          v.reset()
        })
      }
      if (this.$refs.selectRef?.length) {
        this.$refs.selectRef.forEach(v => {
          v.reset()
        })
      }
    },
    // 重置按钮
    reset() {
      this.searchReset()
      this.$emit('reset', this.activeKey, this.activeTag)
    }
  }
}
</script>

<style lang="less" scoped>
.tabs {
  width: 100%;
}

.tabs_tabs {
  margin-top: 20px;
}

.tabs_body {
  width: 100%;
  min-height: 150px;
  position: relative;
}

.tabs_serach {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.tabs_serach_temp {
  display: block;
  width: 23%;
  margin: 1%;
}

.tabs_button {
  padding: 0 1% 20px;
  text-align: right;
}

.tabs_button_plus {
  margin-right: 10px;
}

.tabs_button_redo {
  margin-left: 10px;
}
</style>
